import { render, h } from 'vue'
import { Spin } from 'ant-design-vue'

const handler = (el: HTMLElement, binding: any) => {
  if (binding.value === binding.oldValue) return
  if (binding.value) {
    const positionValue = getComputedStyle(el).position
    if (!['absolute', 'relative', 'fixed'].includes(positionValue)) {
      el.classList.toggle('v-loading-parent', true)
    }

    const style = { backgroundColor: 'rgba(255, 255, 255, 0.8)' }
    if (binding.arg && binding.arg.backgroundColor) {
      style.backgroundColor = binding.arg.backgroundColor
    }

    render(h('div', { class: 'v-loading', style }, h(Spin, binding.arg)), el)
  } else {
    el.classList.toggle('v-loading-parent', false)
    render(null, el)
  }
}

export default handler

//useage
// v-loading="boolean"
// v-loading:[arg]="boolean"
// arg可选，可选Spin组件所有属性和backgroundColor
// const arg={backgroundColor:'red',tip:'加载中',size:'large'}
